<template>
  <div style="margin: 10px">
    <Aphorism
      v-for="(item, index) in thisContext"
      :key="index"
      :info="item"
      :message="item.message"
      :imageUrl="item.imageUrl"
      :name="item.name"
    />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Aphorism from "@/components/Aphorism.vue"; // @ is an alias to /src
import { PropType } from "node_modules/vue/dist/vue";

@Options({
  props: {
    context: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    Aphorism,
  },
  data() {
    var defaultData = {
      thisContext: this.context,
    };
    console.log(this.context);
    return defaultData;
  },
})
export default class ForAphorism extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>